import React from 'react'
import PropTypes from 'prop-types'
export default class Mouse extends React.Component {
  static propTypes = {
    children: PropTypes.func.isRequired
  }
  // 鼠标位置状态
  state = {
    x: 0,
    y: 0
  }

  // 监听鼠标移动事件
  componentDidMount() {
    window.addEventListener('mousemove', this.handleMouseMove)
  }

  componentWillUnmount() {
    window.removeEventListener('mousemove', this.handleMouseMove)
  }
  handleMouseMove = (e) => {
    this.setState({
      x: e.clientX,
      y: e.clientY
    })
  }
  render() {
    // return (
    //   <div>
    //     <p>
    //       x: {this.state.x}---y:{this.state.y}
    //     </p>
    //   </div>
    // )
    return this.props.children(this.state)
  }
}
